<!-- petlist.vue -->
<!-- 宠物列表页面 -->
<template>
    <div>
        <el-card class="pet-list-title"> 宠物列表 </el-card>
        <el-card>
            <ListTable :tableConfig="tableConfig" :tableData="PetList" :total="total" :pageSize="10" @updateQueryData="updateQueryData" @handleEdit="handleEdit" @handleDelete="handleDelete" />
        </el-card>

        <!-- 修改信息表单： -->
        <el-dialog v-model="dialogFormVisible" title="修改用户信息" width="500">
            <!-- 只读 -->
            <el-form-item label="宠物ID" :label-width="formLabelWidth">
                <el-input v-model="form.petId" disabled placeholder="系统自动填充" />
            </el-form-item>

            <!-- 填写修改信息 -->
            <el-form :model="form">
                <el-form-item label="宠物名字" :label-width="formLabelWidth">
                    <el-input v-model="form.petName" autocomplete="off" />
                </el-form-item>
                <el-form-item label="性别" :label-width="formLabelWidth">
                    <el-input v-model="form.gender" autocomplete="off" />
                </el-form-item>
                <el-form-item label="年龄" :label-width="formLabelWidth">
                    <el-input v-model="form.age" autocomplete="off" />
                </el-form-item>
                <el-form-item label="健康状态" :label-width="formLabelWidth">
                    <el-radio-group v-model="form.healthy" class="radio-group">
                        <el-radio value="1">健康</el-radio>
                        <el-radio value="0">患病</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="疫苗接种" :label-width="formLabelWidth">
                    <el-radio-group v-model="form.vaccinated" class="radio-group">
                        <el-radio value="1">已接种</el-radio>
                        <el-radio value="0">未接种</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="押金" :label-width="formLabelWidth">
                    <el-input v-model="form.deposit" autocomplete="off" />
                </el-form-item>
                <el-form-item label="描述" :label-width="formLabelWidth">
                    <el-input v-model="form.details" autocomplete="off" />
                </el-form-item>

                <el-form-item label="品种" :label-width="formLabelWidth">
                    <el-input v-model="form.breed" autocomplete="off" />
                </el-form-item>

                <el-form-item label="类别" :label-width="formLabelWidth">
                    <el-input v-model="form.species" autocomplete="off" />
                </el-form-item>
            </el-form>

            <template #footer>
                <div class="dialog-footer">
                    <el-button
                        @click="
                            dialogFormVisible = false;
                            resetUpload();
                        "
                        >取消</el-button
                    >
                    <el-button
                        type="primary"
                        @click="
                            dialogFormVisible = false;
                            ConfirmBtn();
                        "
                        >确认</el-button
                    >
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { getPetListAPI, deletePetAPI, postupdatePetInfo } from "@/api/pet";
import { onMounted, ref, reactive } from "vue";
import { ElMessage } from "element-plus";

import ListTable from "./ListTable.vue";

// 要渲染的宠物数据
// 子组件：状态栏 formatter函数
const tableConfig = ref([
    { prop: "petName", label: "名字" },
    // { prop: "species", label: "类别" },
    { prop: "breed", label: "品种" },
    { prop: "gender", label: "性别" },
    { prop: "age", label: "年龄" },
    { prop: "region", label: "地区" },
    { prop: "vaccinated", label: "疫苗", formatter: "vaccinated" },
    { prop: "healthy", label: "健康", formatter: "healthy" },
    { prop: "office", label: "来源", formatter: "office" },
    { prop: "deposit", label: "押金" },
    { prop: "adopted", label: "收养", formatter: "adopted" },
    { label: "操作", slot: true, slotName: "Slot" },
]);

// 存储宠物列表
const PetList = ref([]);
// 宠物列表的数据总量
const total = ref(0);
const getPetList = async () => {
    const res = await getPetListAPI();
    PetList.value = res.data.items;
    total.value = res.data.items.length;
};

onMounted(() => {
    getPetList();
});

// 初始化查询参数
const queryParams = ref({ pageNum: 0, pageSize: 10 });
// 更新查询参数，如果bool为true则调后台接口
const updateQueryData = (params, bool) => {
    queryParams.value = { ...queryParams.value, ...params };
    console.log("更新查询参数:", queryParams.value);
    if (bool) {
        // 根据新的查询参数重新获取数据
        getPetList();
    }
};

const formLabelWidth = "180px"; //输入框标题宽度
const dialogFormVisible = ref(false);
// 表单数据存储
const form = reactive({
    petId: "", // 宠物ID
    petName: "", // 宠物名字
    gender: "", // 性别
    age: "", // 年龄
    healthy: "", // 健康状态:1表示健康，0表示患病
    vaccinated: "", // 疫苗接种情况:1表示接种，0表示未接种
    deposit: "", // 押金
    details: "", // 描述
    breed: "", // 品种
    species: "", // 类别
});

// 重置表单
const resetUpload = () => {
    console.log("取消按钮");
    form.petId = "";
    form.petName = "";
    form.gender = "";
    form.age = "";
    form.healthy = "";
    form.vaccinated = "";
    form.deposit = "";
    form.details = "";
    form.breed = "";
    form.species = "";
};

// 编辑按钮-接收petId参数
const handleEdit = async (petId) => {
    console.log("编辑的宠物ID:", petId);

    // 从表格数据中获取当前宠物信息
    const pet = PetList.value.find((item) => item.petId === petId);

    if (pet) {
        // 打开编辑窗
        dialogFormVisible.value = true;

        // 填充表单数据
        form.petId = pet.petId;
        form.healthy = String(pet.healthy || "");
        form.vaccinated = String(pet.vaccinated || ""); // 确保为字符串类型
    }
};

// 删除 - 接收petId参数
const handleDelete = async (petId) => {
    // console.log("点击删除，宠物ID:", petId);
    const res = await deletePetAPI(petId);
    if (res.message === "该宠物有关联订单，无法删除") {
        console.log("删除失败");
        ElMessage.warning("该宠物有关联订单，无法删除");
    }
    if (res.message === "删除成功") {
        ElMessage.success("删除成功");
        // 直接更新数据，无需手动刷新：直接从当前列表中过滤掉已删除的宠物id
        PetList.value = PetList.value.filter((item) => item.petId !== petId);
    }
};

// 表单栏-确认按钮 - 修改更新逻辑
const ConfirmBtn = async () => {
    console.log("表单确认按钮，表单数据：", form);

    // 过滤掉空值
    const nonEmptyForm = Object.fromEntries(Object.entries(form).filter(([key, value]) => value !== ""));

    // 修改信息接口
    const res = await postupdatePetInfo(nonEmptyForm);
    if (res.message === "成功") {
        ElMessage.success("修改信息成功");
        getPetList();
        resetUpload();
    } else {
        ElMessage.error("修改信息失败");
    }
};
</script>

<style scoped lang="scss">
.pet-list-title {
    margin-bottom: 20px;
}
</style>
